<template>
  <div class="blog-info-wrapper">
    <el-card class="box-card opacity" v-loading="articleInfoInLoading">
      <el-row>
        <el-col class="p-10 text-center">
          <el-avatar :size="100" :src="circleUrl"></el-avatar>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin:0 5px;">
        <el-col :span="6">
          <el-tooltip class="item" effect="dark" content="收录文章数" placement="top-start">
            <div class="blog-info-block ho-black-scale">
              <span><i class="el-icon-document-copy fa-large"></i></span><br>
              <span><strong class="fa-big">{{blogInfo.articleCount}}</strong><small> 篇</small></span>
            </div>
          </el-tooltip>
        </el-col>
        <el-col :span="6">
          <el-tooltip class="item" effect="dark" content="评论总数" placement="top-start">
            <div class="blog-info-block ho-black-scale">
              <span><i class="el-icon-chat-dot-round fa-large"></i></span><br>
              <span><strong class="fa-big">{{blogInfo.commentCount}}</strong><small> 条</small></span>
            </div>
          </el-tooltip>
        </el-col>
        <el-col :span="6">
          <el-tooltip class="item" effect="dark" content="留言总数" placement="top-start">
            <div class="blog-info-block ho-black-scale">
              <span><i class="el-icon-edit-outline fa-large"></i></span><br>
              <span><strong class="fa-big">{{blogInfo.messageCount}}</strong><small> 条</small></span>
            </div>
          </el-tooltip>
        </el-col>
        <el-col :span="6">
          <el-tooltip class="item" effect="dark" content="博客运行天数" placement="top-start">
            <div class="blog-info-block ho-black-scale">
              <span><i class="el-icon-data-line fa-large"></i></span><br>
              <span><strong class="fa-big">{{blogInfo.blogOnlineDate}}</strong><small> 天</small></span>
            </div>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row class="mt-20">
        <el-col :span="3" :offset="2">
          <el-tooltip class="item" effect="dark" content="Gitee" placement="top-start">
            <div class="logo-icon">
              <a href="https://gitee.com/bytech-git/blog/tree/master/trunk" target="_blank">
                <img src="../assets/img/logo/gitee.png" />
              </a>
            </div>
          </el-tooltip>
        </el-col>
        <el-col :span="3">
          <el-tooltip class="item" effect="dark" content="网易云音乐" placement="top-start">
            <div class="logo-icon">
              <a href="https://music.163.com/#/user/home?id=100259273" target="_blank">
                <img src="https://s1.music.126.net/style/favicon.ico" />
              </a>
            </div>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card mt-20 service-state-card opacity" v-loading="serviceInfoInLoading">
      <template #header>服务状态</template>
      <el-row class="service-state-bar-wrapper" :gutter="10">
        <template v-for="(value, key) in serviceStatus">
          <el-col :span="12">
            <div :class="value>0?'service-state-bar alive':'service-state-bar die'">
              <span style="font-size: var(--el-font-size-small);">{{key}}<small class="text-muted"> 服务</small></span>
              <span class="f-r"><strong style="font-size: var(--el-font-size-small);">{{value}}</strong><small class="text-muted"> 在线</small></span>
            </div>
          </el-col>
        </template>
      </el-row>
    </el-card>
  </div>
</template>
<script>
  export default {
    name: '',
    data() {
      this.$axios.get('/api/admin-service/blog/info').then(resultData => {
        if (resultData) {
          this.blogInfo = resultData;
        }
        setTimeout(() => {
          this.articleInfoInLoading = false;
        }, 1000);
      }).catch(() => {
        this.blogInfo = {};
        this.articleInfoInLoading = false;
      });
      this.$axios.get('/api/admin-service/blog/serviceInfo').then(resultData => {
        this.serviceStatus = resultData;
        setTimeout(() => {
          this.serviceInfoInLoading = false;
        }, 1000);
      }).catch(() => {
        this.serviceInfoInLoading = false;
      });
      return {
        circleUrl: require('@/assets/img/avatar.png'),
        articleInfoInLoading: true,
        serviceInfoInLoading: true,
        blogInfo: {},
        serviceStatus: {}
      }
    }
  }
</script>

<style>
</style>